<template>
  <div class="content">
    <div class="top">
      <div class="margin">
        <img :src="orderForm.goodsImg" mode="scaleToFill" />
        <div class="right">
          <p class="ellipsis-2">{{orderForm.goodsName}}</p>
          <div>
            <span
              v-if="orderForm.goodsSpecList"
            >{{orderForm.goodsSpecList ? orderForm.goodsSpecList[0].goodsSpecName : ''}}</span>
            <label v-else></label>
            <!-- <p>￥{{orderForm.stockSupplyCost}}</p> // 同安卓同步 -->
            <p>￥{{orderForm.retailAmount}}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="list">
      <div v-for="(item,index) in list1" :key="index">
        <div>
          <span>{{item.label}}</span>
          <p>{{item.value}}</p>
        </div>
      </div>
    </div>
    <div class="list">
      <div v-for="(item,index) in list2" :key="index">
        <div>
          <span>{{item.label}}</span>
          <p>{{item.value}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  FIND_STOCK_GOODS_INFO,
  FIND_SHOP_GOODS_INFO,
  FIND_MY_STOCK_GOODS_INFO
} from '@/api'
import { getCurrentPageParams } from '@/utils'

export default {
  components: {},
  props: {},
  data () {
    return {
      form: {},
      saleNum: null
    }
  },
  computed: {
    orderForm () {
      return {
        ...this.form
      }
    },
    list1 () {
      return [
        {
          label: '已售数量(件)',
          value: this.form.saleNum
        },
        {
          label: '剩余数量(件)',
          value: this.form.goodsStock - this.saleNum
        },
        {
          label: '已解除赊货锁额',
          value: `￥${(this.form.freeAmount * 1).toFixed(2)}`
        },
        {
          label: '剩余赊货锁额',
          // value: `￥${((this.form.amount - this.form.freeAmount) * 1).toFixed(
          //   2
          // )}`
          value: `${(this.form.stockSupplyCost *
            this.form.stockCreditPre *
            (this.form.goodsStock - this.saleNum) * 0.01).toFixed(2)}`
        }
        // {
        //   label: '剩余赊货锁额时限',
        //   value: this.form.aaa
        // },
        // {
        //   label: '已赚佣金',
        //   value: this.form.aaa
        // }
      ]
    },
    list2 () {
      return [
        {
          label: '供货价',
          value: `￥${(this.form.stockSupplyCost * 1).toFixed(2)}`
        },
        {
          label: `进货数量(最大${this.form.maxStockNum}件)`,
          value: this.form.goodsStock
        },
        {
          label: '商品总金额',
          // value: this.form.stockSupplyNum * this.form.stockSupplyCost
          value: `￥${(
            this.form.goodsStock *
            this.form.stockSupplyCost *
            1
          ).toFixed(2)}`
        },
        {
          label: `赊货锁额(${this.form.stockCreditPre}%)`,
          value:
            // this.form.stockSupplyNum * // to do 改了接口的
            `￥${(
              this.form.stockSupplyCost *
              (this.form.stockCreditPre * 0.01)
            ).toFixed(2)}`
        }

        // {
        //   label: '赊货锁额时限',
        //   value: this.form.aaa
        // }
      ]
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    // this.getStockGoodsInfo()
    // this.getGoodsInfo()
    this.findMyStockGoodsInfo()
  },
  methods: {
    getStockGoodsInfo () {
      const vm = this
      FIND_STOCK_GOODS_INFO(
        getCurrentPageParams('goodsNo') || '410153889963180032'
      )
        .then(r => {
          if (r.data.code === '0') {
            vm.form = r.data.data
            vm.form.goodsName = r.data.data.goodsName
            vm.form.stockSupplyCost = (vm.form.stockSupplyCost * 1).toFixed(2)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    getGoodsInfo () {
      const vm = this
      FIND_SHOP_GOODS_INFO(
        getCurrentPageParams('goodsNo') || '410153889963180032'
      )
        .then(r => {
          if (r.data.code === '0') {
            // 销售数量
            if (r.data.data) {
              if (r.data.data.saleNum) {
                let { saleNum } = r.data.data
                vm.saleNum = saleNum
              } else {
                vm.saleNum = 0
              }
            } else {
              vm.saleNum = 0
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    findMyStockGoodsInfo () {
      const vm = this
      FIND_MY_STOCK_GOODS_INFO(
        getCurrentPageParams('goodsNo') || '410153889963180032'
      )
        .then(r => {
          if (r.data.code === '0') {
            vm.form = r.data.data
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    init () {
      // const vm = this
      // vm.goodsNo =
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
.content {
  background: #f6f8f9;
  > .top {
    width: 100%;
    margin: 0 auto 15px;
    background: #fff;
    > .margin {
      width: 90%;
      margin: auto;
      display: flex;
      align-items: center;
      padding: 15px 0;
      > img {
        width: 75px;
        height: 75px;
        border-radius: 6px;
      }
      > .right {
        width: calc(100% - 75px - 15px);
        height: 75px;
        margin-left: 15px;
        font-size: 14px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        > div {
          display: flex;
          justify-content: space-between;
          align-items: center;
          span {
            font-size: 12px;
            padding: 2px 4px;
            background: #7f7f7f;
            color: #fff;
            border-radius: 6px;
          }
          p {
            color: #f03d26;
          }
        }
      }
    }
  }
  > .list {
    width: 100%;
    background: #fff;
    margin-bottom: 15px;
    > div {
      width: 100%;
      border-bottom: 1px solid #f6f8f9;
      > div {
        width: 95%;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 40px;
        color: #000;
        font-size: 14px;
        p {
          color: #666;
        }
      }
    }
  }
}
</style>
